<!--
* 柱状折线图组件
 * @param {object} deep 深色模式
 * @param {object} light 浅色模式
 * @param {object} deepBeautyBlue 蓝色背景模式，柱状为蓝色渐变,
 * @param {object} deepBeautyPink 蓝色背景模式，柱状为粉色渐变
 * @param {object} deepBeautyDoubleBar 双柱图  蓝色背景模式
-->

<template>
  <div class="main">
    <div v-show="options.rows.length > 0" :id="tag" :key="tag" class="_ehl_line"></div>
    <div v-show="options.rows.length === 0" class="noData">{{
      $t('common.zanwushuju')
    }}</div>
  </div>
</template>
<script>
  export default {
    name: 'ehlLine',
    props: {
      options: { type: Object, required: true, default: () => {} },
      reverse: { type: Boolean, default: () => false },
    },
    data() {
      return {
        echart: null,
        local: null,
        timer: null,
        tag: Math.ceil(
          Math.random() * 10000 +
            Math.random() * 100 +
            Math.random() * 10 +
            Math.random(),
        ),
        deep: {
          color: [
            '#007AFF',
            '#45C9D0',
            '#5C89FF',
            '#715CFF',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            top: 30,
            textStyle: {
              color: '#B4F5FF',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 45,
              fontSize: 10,
              color: '#B4F5FF',
            },
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
            },
          },
          series: {
            barWidth: '70%',
            lineStyle: { width: 2 },
            smooth: false,
            areaStyle: this.options.areaStyle,
          },
        },
        light: {
          color: ['#5C89FF', '#7C6AF2', '#39D2C5', '#FF9944', '#FBD85E', '#55ACEE'],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
          },
          legend: { top: 30 },
          xAxis: {
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
          },
          yAxis: {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
          },
          series: {
            barWidth: '70%',
            lineStyle: { width: 2 },
            smooth: false,
            areaStyle: this.options.areaStyle, //面积图显示，null为不显示
          },
        },
        deepBeautyBlue: {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#61C1FF', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1F4099', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            '#FFFC13',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'left',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            show: this.options.legendShow ? this.options.legendShow : false,
            top: 30,
            left: 'center',
            align: 'left',
            textStyle: {
              color: '#B4F5FF',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 13,
              color: '#B4F5FF',
            },
          },
          yAxis: {
            axisLine: {
              show: false,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3C4353',
              },
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
            smooth: false,
            areaStyle: this.options.areaStyle,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0], // 圆角（左上、右上、右下、左下）
            },
          },
        },
        deepBeautyPink: {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#D084FF', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#421F99', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            '#FFFC13',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'left',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            show: this.options.legendShow ? this.options.legendShow : false,
            top: 30,
            left: 'center',
            align: 'left',
            textStyle: {
              color: '#B4F5FF',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 13,
              color: '#B4F5FF',
            },
          },
          yAxis: {
            axisLine: {
              show: false,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3C4353',
              },
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
            smooth: false,
            areaStyle: this.options.areaStyle,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0], // 圆角（左上、右上、右下、左下）
            },
          },
        },
        deepBeautyDoubleBar: {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#61C1FF', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#1F4099', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#FFBE84', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#8C4412', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            '#FFFC13',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'left',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            show: this.options.legendShow ? this.options.legendShow : false,
            top: 30,
            left: 'center',
            align: 'left',
            textStyle: {
              color: '#B4F5FF',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 13,
              color: '#B4F5FF',
            },
          },
          yAxis: {
            axisLine: {
              show: false,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3C4353',
              },
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
            smooth: false,
            areaStyle: this.options.areaStyle,
            itemStyle: {
              barBorderRadius: [20, 20, 0, 0], // 圆角（左上、右上、右下、左下）
            },
          },
        },
        black: {
          color: [
            '#207DFF',
            '#1CF09C',
            '#FF8120',
            '#715CFF',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#333333',
            },
          },
          legend: {
            left: 'right',
            textStyle: {
              fontSize: 16,
              color: '#333333',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#DFE6ED',
              },
            },
            axisLabel: {
              fontSize: 14,
              color: '#333333',
            },
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DFE6ED',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#DFE6ED',
              },
            },
            axisLabel: {
              color: '#333333',
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
            markLine: this.options.markLine,
            symbol: 'emptyCircle',
            symbolSize: 16,
            smooth: false,
            areaStyle: this.options.areaStyle,
          },
        },
        blackRotate: {
          color: [
            '#207DFF',
            '#1CF09C',
            '#FF8120',
            '#715CFF',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          grid: this.options.grid,
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#333333',
            },
          },
          legend: {
            left: 'right',
            textStyle: {
              fontSize: 16,
              color: '#333333',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#DFE6ED',
              },
            },
            axisLabel: {
              rotate: 20,
              margin: 20,
              fontSize: 14,
              color: '#333333',
            },
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DFE6ED',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#DFE6ED',
              },
            },
            axisLabel: {
              color: '#333333',
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
            markLine: this.options.markLine,
            symbol: 'emptyCircle',
            symbolSize: 16,
            smooth: false,
            areaStyle: this.options.areaStyle,
          },
        },
      }
    },
    watch: {
      'options.rows': {
        handler() {
          this.timer = setTimeout(() => {
            this.update()
          }, 500)
        },
        deep: true,
      },
    },
    mounted() {
      if (this.options.rows.length > 0) {
        this.init()
      }
    },
    destroyed() {
      this.echart = null
      this.timer = null
      window.onresize = null
    },
    methods: {
      init() {
        this.echart = this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), { lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
            setTimeout(() => {
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
      update() {
        this.echart = this.echart
          ? this.echart
          : this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), { lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
            setTimeout(() => {
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
      change() {
        //变量定义
        let theme =
            this.options.theme === 'black'
              ? this.black
              : this.options.theme === 'blackRotate'
              ? this.blackRotate
              : this.options.theme === 'deep'
              ? this.deep
              : this.options.theme === 'light'
              ? this.light
              : this.options.theme === 'deepBeautyBlue'
              ? this.deepBeautyBlue
              : this.options.theme === 'deepBeautyPink'
              ? this.deepBeautyPink
              : this.deepBeautyDoubleBar,
          columns = this.options.columns,
          rows = this.options.rows,
          type = this.options.type,
          title = this.options.title ? theme.title : null,
          xAxis = [],
          yAxis = [],
          series = [],
          dataZoom = this.options.dataZoom,
          tooltip = this.options.tooltip ? this.options.tooltip : theme.tooltip,
          grid = this.options.grid,
          color = this.options.color ? this.options.color : theme.color,
          legend = this.options.legend
            ? { data: [], ...this.options.legend }
            : { data: [], ...theme.legend },
          columnsKey = Object.keys(columns)
        //循环赋值
        xAxis.push({
          type: 'category',
          data: rows.map(i => {
            return i[columnsKey[0]]
          }),
          ...theme.xAxis,
        })
        columnsKey.slice(1).forEach((key, index) => {
          if (Array.isArray(columns[key])) {
            yAxis.push({ type: 'value', name: null, ...theme.yAxis })
            columns[key].forEach((item, num) => {
              legend.data.push(item)
              series.push({
                name: item,
                yAxisIndex: index,
                type: type[index],
                data: rows.map(i => {
                  return i[key][num]
                }),
                ...theme.series,
              })
            })
          } else {
            yAxis.push({ type: 'value', name: columns[key], ...theme.yAxis })
            legend.data.push(columns[key])
            series.push({
              name: columns[key],
              yAxisIndex: index,
              type: type[index],
              data: rows.map(i => {
                return i[key]
              }),
              ...theme.series,
            })
          }
        })
        if (this.reverse) {
          let tmp = {
            color,
            grid,
            tooltip,
            dataZoom,
            xAxis: yAxis,
            yAxis: xAxis,
            series,
            title,
            legend,
          }
          return tmp
        } else {
          let tmp = {
            color,
            grid,
            tooltip,
            dataZoom,
            xAxis,
            yAxis,
            series,
            title,
            legend,
          }
          return tmp
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  .main {
    width: 100%;
    height: 100%;

    ._ehl_line {
      width: 100%;
      height: 100%;
    }

    .noData {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 16px;
      color: #909399;
    }
  }
</style>
